<script setup>
import {useMessage} from "naive-ui";
import {OPERATE_DRAWER_MODE} from "@/common/constant.js";
import {computed, ref} from "vue";
import {add, detailById, modifyById} from "@/apis/sys/dept.js";

const message = useMessage()
const props = defineProps({
  mode: {
    type: Number,
    default: OPERATE_DRAWER_MODE.DETAIL
  },
  id: {
    type: String,
    default: undefined
  },
  parentData: {
    type: Array,
    required: true,
    default: []
  }
})
const parentDataOptions = computed(() => {
  return [
    {
      id: '0',
      name: '顶级',
      children: props.parentData
    }
  ]
})
const showSubmitBtn = computed(() => {
  return props.mode === OPERATE_DRAWER_MODE.ADD || props.mode === OPERATE_DRAWER_MODE.EDIT
})
const show = defineModel('show')
const emits = defineEmits(['success'])
const formRef = ref(undefined)
const title = computed(() => {
  if (props.mode === OPERATE_DRAWER_MODE.ADD) {
    return '新增部门'
  } else if (props.mode === OPERATE_DRAWER_MODE.EDIT) {
    return '修改部门'
  } else {
    return '部门详情'
  }
})
const rules = {
  parentId: [
    {required: true, message: '请选择上级菜单', trigger: 'change'}
  ],
  name: [
    {required: true, message: '请输入菜单名称', trigger: 'blur'}
  ]
}
const disabled = computed(() => {
  return props.mode === OPERATE_DRAWER_MODE.DETAIL
})
const initFormDataValue = {
  name: undefined,
  parentId: undefined
}
const formData = ref({...initFormDataValue})

const onAfterEnter = () => {
  if (props.mode === OPERATE_DRAWER_MODE.DETAIL || props.mode === OPERATE_DRAWER_MODE.EDIT) {
    loadDetail(props.id)
  }
}
const onAfterLeave = () => {
  resetForm()
}
const resetForm = () => {
  formData.value = {...initFormDataValue}
}
const loadDetail = async (id) => {
  const {code, data} = await detailById(id)
  if (code === 0) {
    formData.value = data
  }
}
const onFinish = () => {
  formRef.value.validate()
      .then(async () => {
        if (props.mode === OPERATE_DRAWER_MODE.ADD) {
          const {code} = await add(formData.value)
          if (code === 0) {
            message.success('新增成功')
            show.value = false
            emits('success')
          }
        } else if (props.mode === OPERATE_DRAWER_MODE.EDIT) {
          const {code} = await modifyById(props.id, formData.value)
          if (code === 0) {
            message.success('修改成功')
            show.value = false
            emits('success')
          }
        }
      })
}
</script>

<template>
  <n-drawer
      v-model:show="show"
      resizable
      :min-width="502"
      :default-width="502"
      @after-enter="onAfterEnter"
      @after-leave="onAfterLeave">
    <n-drawer-content
        :title="title"
        closable
        :native-scrollbar="false">
      <n-form :model="formData"
              label-placement="left"
              label-width="80"
              ref="formRef"
              :rules="rules">
        <n-form-item label="上级部门" path="parentId">
          <n-tree-select
              :disabled="disabled || props.mode === OPERATE_DRAWER_MODE.EDIT"
              :options="parentDataOptions"
              v-model:value="formData.parentId"
              label-field="name"
              key-field="id"
          />
        </n-form-item>
        <n-form-item label="部门名称" path="name">
          <n-input v-model:value="formData.name"
                   placeholder="请输入"
                   clearable
                   :disabled="disabled"/>
        </n-form-item>
        <n-form-item label="部门编号" path="deptNo">
          <n-input v-model:value="formData.deptNo"
                   placeholder="系统自动生成"
                   clearable
                   disabled/>
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space>
          <n-button type="primary" @click="onFinish" v-if="showSubmitBtn">提交</n-button>
          <n-button @click="show = false">取消</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<style scoped>

</style>